<template>
	<view style="border-top: 1rpx solid rgba(235,235,235,0.5);">
		<view class="content">
			<view class="uni-flex one-label">
				<view class="title-text labelcolor">任务ID</view>
				<view class="label-data">{{info.task_id}}</view>
			</view>
			<view class="uni-flex one-label">
				<view class="title-text labelcolor">商家ID</view>
				<view class="label-data">{{info.shangjia_id}}</view>
			</view>
			<view class="uni-flex one-label">
				<view class="title-text labelcolor">购物平台</view>
				<view class="label-data">{{info.pingtaiStr}}</view>
			</view>
		</view>

		<view class="content" style="margin-top: 20rpx;">
			<view class="uni-flex one-label">
				<view class="title-text labelcolor">购物账户</view>
				<view class="label-data">{{info.gouwu_zhanghao}}</view>
			</view>
			<view class="uni-flex one-label">
				<view class="title-text labelcolor">收货地址</view>
				<view class="label-data">{{info.shouhuo_addr}}</view>
			</view>
			<view class="uni-flex one-label">
				<view class="title-text labelcolor">手机号</view>
				<view class="label-data">{{info.mobile}}</view>
			</view>
		</view>

		<view class="content" style="margin-top: 20rpx;">
			<view class="uni-flex one-label">
				<view class="title-text labelcolor">商品金额</view>
				<view class="label-data">¥{{info.price}}</view>
			</view>
			<view class="uni-flex one-label">
				<view class="title-text labelcolor">任务佣金</view>
				<view class="label-data">¥{{info.yongjin}}</view>
			</view>
			<view class="uni-flex one-label">
				<view class="title-text labelcolor" style="width: auto;">团队管理费</view>
				<view class="label-data">¥{{info.tuanduifei}}</view>
			</view>
			<view class="uni-flex one-label">
				<view class="title-text labelcolor" style="width: auto;">推荐人提成</view>
				<view class="label-data">¥{{info.fencheng}}</view>
			</view>
			<view class="uni-flex one-label">
				<view class="title-text labelcolor" style="width: auto;">平台服务费</view>
				<view class="label-data">¥{{info.fuwufei}}</view>
			</view>
			<view class="uni-flex one-label">
				<view class="title-text labelcolor" style="width: auto;">实得佣金</view>
				<view class="label-data">¥{{info.yongjin-info.fencheng-info.tuanduifei-info.fuwufei}}</view>
			</view>
		</view>
		<view class="" style="padding:0 54rpx 80rpx;">
			<!-- <submitButtom text="提交商家审核" :buttonMethod="tanchuang()"></submitButtom> -->
			<view class="denglv" @tap="tanchuang()">
				提交商家审核
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal v-model="show" content="请确认任务是否已经完成并提交至商家审核" @confirm="submit()" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	// import submitButtom from "@/components/submit-button/submit-button.vue"
	export default {
		// components: {
		// 	submitButtom
		// },
		data() {
			return {
				info: {},
				isTijiao: true,
				show: false
			}
		},
		onLoad: function(parame) {
			var that = this;
			that.$util.nuiAjax(that.$jiekou.tijiaoTaskInfo, {
				taskMyId: parame.id
			}, function(res) {
				if (res.result == "true") {
					that.info = res;
				}
			});
		},
		methods: {
			tanchuang: function() {
				this.show=true;
			},
			submit: function() {
				var that = this;
				if (!that.isTijiao) {
					return;
				}
				that.isTijiao = false;
				that.$util.nuiAjax(that.$jiekou.tijiaoRenwu, {
					taskMyId: that.info.id
				}, function(res) {
					console.log(JSON.stringify(res));
					if (res.result == "true") {
						that.$refs.uToast.show({
							title: "提交成功",
							callback: function() {
								uni.navigateBack();
							}
						});
					} else {
						that.$refs.uToast.show({
							title: res.message,
							callback: function() {
								that.isTijiao = true;
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page-bg-color;
	}
	
	.denglv{
		height:96rpx;
		background: $uni-color-primary;
		border-radius:48rpx;
		margin-top: 80rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 32rpx;
		color: $uni-text-color-inverse;
		letter-spacing: 1rpx;
	}

	.content {
		background-color: #FFFFFF;
		padding: 0 30rpx 30rpx 30rpx;
		box-shadow: 0px 0px 12rpx 0px rgba(240, 240, 240, 0.5);
	}

	.one-label {
		padding-top: 30rpx;
		justify-content: space-between;
	}

	.labelcolor {
		color: #999999;
		text-align: right;
	}

	.title-text {
		width: 112rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}
</style>
